<template>
  <div class="lifecycle-demo">
    <h3>Vue 3 生命周期函数演示</h3>
    <div class="lifecycle-logs">
      <h4>生命周期日志:</h4>
      <ul>
        <li v-for="(log, index) in logs" :key="index" :class="log.type">
          {{ log.message }}
        </li>
      </ul>
    </div>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, onUpdated, onBeforeUpdate, onErrorCaptured } from 'vue';

// 日志数据
const logs = ref([]);
const data = ref('初始数据');

// 添加日志的函数
const addLog = (message, type = 'info') => {
  logs.value.push({ message, type });
  console.log(`${new Date().toLocaleTimeString()}: ${message}`);
};

// 数据更新函数
const updateData = () => {
  data.value = `更新后的数据 ${Date.now()}`;
  addLog('用户点击了更新数据按钮');
};

// 记录setup函数执行
addLog('setup函数执行中...');

// onMounted - 组件挂载后调用
onMounted(() => {
  addLog('组件已挂载 (onMounted)', 'mount');
  // 在这里可以进行DOM操作、API调用等
});

// onBeforeUpdate - 组件更新前调用
onBeforeUpdate(() => {
  // 避免在onBeforeUpdate中直接修改响应式数据导致递归更新
  console.log('组件即将更新 (onBeforeUpdate)');
  // 可以访问更新前的状态，但避免修改会触发更新的响应式数据
});

// onUpdated - 组件更新后调用
onUpdated(() => {
  // 避免在onUpdated中直接修改响应式数据导致递归更新
  console.log('组件已更新 (onUpdated)');
  // 可以访问更新后的DOM，但避免修改会触发更新的响应式数据
});

// onBeforeUnmount - 组件卸载前调用
onBeforeUnmount(() => {
  addLog('组件即将卸载 (onBeforeUnmount)', 'unmount');
  // 清理定时器、事件监听器等
});

// onErrorCaptured - 捕获子组件错误
onErrorCaptured((error, instance, info) => {
  addLog(`捕获到错误: ${error.message} (${info})`, 'error');
  // 返回true可以阻止错误继续向上传播
  return false;
});
</script>

<style scoped>
.lifecycle-demo {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px;
  max-width: 600px;
}

.lifecycle-logs {
  margin-top: 20px;
  background: white;
  padding: 15px;
  border-radius: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.lifecycle-logs ul {
  list-style: none;
  padding: 0;
}

.lifecycle-logs li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.lifecycle-logs li:last-child {
  border-bottom: none;
}

.lifecycle-logs li.mount {
  color: #28a745;
}

.lifecycle-logs li.update {
  color: #007bff;
}

.lifecycle-logs li.unmount {
  color: #6c757d;
}

.lifecycle-logs li.error {
  color: #dc3545;
}

button {
  margin-top: 15px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}
</style>